|
I love the fact that CSS is finally reclaiming control over visual interactions, taking charge of the styling, the animation, and the accessibility exactly as it should. Today, native browser capabilities allow us to move the heavy lifting away from the JavaScript main thread and closer to the GPU. By letting the browser’s engine optimize performance under the hood, we save energy and processing power while building code that is robust, accessible, and independent of external libraries that might deprecate tomorrow. We have 3D, modern layout techniques, clip-paths, transforms, custom properties, scroll-driven animations, view-transitions, And, of course, there’s SVG, which isn’t new, but allows us to build entire websites through illustrations and animations. Take the example below: it’s responsive, lightweight, accessible, and powered primarily by CSS Grid + SVG. We can even build an entire video game including the UI using only SVG: What follows is not a complete guide to modern CSS, but an opinionated selection of techniques I reach for when I want a site to feel alive and be remembered. There are many ways to create memorable experiences. Sometimes it’s as simple as a form that completes smoothly. But here I’m interested in the expressive end of the spectrum. Motion as Communication: Defining Your IntentBefore we dive into the technical side, I want to clarify something: we shouldn’t move things just because we can. Everything communicates, and our animations are no exception. We must take the time to design movements that support the message we want to convey in order to keep our intents tightly scoped without overdoing it. Here’s a methodology I use when planning the design and animation of a site. Imagine we’re working on a project for a nature event focused on mushrooms. The design language changes completely depending on the “vibe”: selling a “Psychedelic Mushroom Rave” is worlds apart from a “Spiritual Mushroom Retreat” focused on ancestral medicine. Every design decision communicates. I like to create what I call keyword liststo define my intent and scope. For example, I might break things down into different options: Option A: The Psychedelic Event
Option B: The Spiritual Retreat
This is the kind of exercise I do to guide my design and animation decisions. The lists will help me select everything from which CSS properties I plan to use and how to use them. I even share them with the client and, together, we choose a direction. Let’s say we go with Option A and look at a few examples of what I think are essential ingredients for creating memorable user experiences. Split Text AnimationsThese animations became popular thanks to the GSAP SplitText plugin. It splits text by character (or words, or lines if you like) so we can create interesting text effects, like staggered animations. This approach wraps each letter in “Hola” in a span. From there, each span is inline-styled with a custom property indexing the spans in order. Which is something that will get a lot easier when the But for now, each custom property value acts as a multiplier that increases an Accessibility is the tricky part here. The instinct is to hide all the individual spans from assistive technology with But be warned: this pattern doesn’t guarantee a good experience across all screen readers. Adrian Roselli tested GSAP’s SplitText across eight screen reader and browser combinations and found it only worked correctly in two of them. If you ship this technique, test it with real assistive technology. If that risk feels too high, there’s a very clever alternative from Preethi worth knowing that uses the What would be great is a pseudo-selector like Remember to respect the user’s motion preferences on every animation: And here we go: It might not scale too much when we have a lot of text and different animations we want to apply. For the psychedelic event, I wanted to try splitting text with SMIL, but it was verbose. This is the code for animating two letters alone: Add Here is the complete code. It’s easier to write it when you have an AI to do it for you: For longer text, a library like GSAP gives you more control, but the same accessibility risks we discussed earlier apply, and the results across screen readers are inconsistent: This would be a nice approach for Option B if we had gone that route. See how “serene” things feel as the text fades in. Masking & ClippingThe Our project is a very clear use case for Note:The From there, we apply the same animation to the different SVG groups in our illustration: How psychedelic is this?! Scroll-Driven AnimationsScroll-driven animations are great because we can connect an animation’s progress to the user’s scrolling instead of a typical timeline that runs and stops. We can use it for subtle and somewhat “trippy” movement, like a light parallax effect. In this case, we can make things that appear closer to the user move faster than the ones that are more distant. This is the full CSS: The 3D TransformsThis one is trickier and we need to keep an eye on performance. A tool like Layoutit can help carry the lift because it has a voxels and terrain generator built entirely with CSS 3D. It can go even further when it’s complemented with VoxCSS, a full voxel engine that renders 3D cuboids using only CSS Grid layers and transforms without the complexity of Canvas or WebGL. Let’s put together some combination scrolling and 3D effects. It’s the sort of thing that supports the “hypnotic” and “dancing” ideas in the Option A keyword list. Check this out: Here, I’ve set up a scene with depth using the Let’s connect that to a scroll-driven animation that uses Custom Cursors
And we can use it to play around with the images, displaying different cursors on different containers when the user hovers them. I would personally use an SVG and PNG image for transparency support, though the property supports any raster image. It’s worth noting that cursor sizes vary by browser: Firefox caps custom cursors at 32×32px, while Chrome supports up to 128×128px. Most browsers refuse to display — or will downscale — cursors that are larger than 32×32px on high-DPI (retina) screens. Keeping your cursor at 32×32px is the safest choice to ensure consistency. For example: We can even set multiple fallbacks to ensure the widest level of browser support: While this is cool and all, we have to keep accessibility in mind for something that changes default web behavior like this. Custom cursors could be fun to apply to very specific elements rather than wholesale across the board. Bonus: Anchor PositioningOne more thing before we wrap up. I’ve been playing with CSS Anchor Positioning, inspired by a Kevin Powell demo. We can use it to attach a single pseudo-element to a currently-hovered item instead of attaching a pseudo-element for each and every item. In other words, we create a single element and anchor it to a hovered element, like highlighting cards: That opens up interesting possibilities, like being able to transition the hover state between cards. In this case, I’m using the ConclusionThe technical barriers for creating memorable web experiences are mostly gone now. I hope everything we’ve covered here gives you an idea of just how far we can go with modern CSS features that completely remove the need for additional JavaScript. We have more possibilities than ever before, all without the need for complex technical overhead like days past. So, instead of asking, is this possible?, the most important question becomes, does this movement tell a better story?If yes, ship it. Use these tools not because you can, but because they help you tell a better story, one that is also accessible and performant. And, of course, everything in here is just a handful of ways to do that. But what sort of memorable experiences have you used in your work? Or what have you seen on other sites?
CommentsLeave a Reply Cancel reply |
Great read!
Reply